
<html lang=""><head>
    <title>事件 · MINA</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.0">




    <link rel="stylesheet" href="../../../../gitbook/style.css">




    <link rel="stylesheet" href="../../../../gitbook/gitbook-plugin-highlight/website.css">



    <link rel="stylesheet" href="../../../../gitbook/gitbook-plugin-search/search.css">























    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../../../gitbook/images/favicon.ico" type="image/x-icon">


    <link rel="next" href="import.html">


    <link rel="prev" href="template.html">


</head>
<body>

<div class="book with-summary">
    <div>

        <div class="sub_nav_box">
            <div class="sub_nav_inner">




                <ul class="top_sub_nav">




                    <li class="sub_nav_item " data-level="1.1" data-path="../../../">

                        <a href="../../../">


                            简易教程

                        </a>

                    </li>

                    <li class="sub_nav_item selected" data-level="1.2" data-path="../../MINA.html">

                        <a href="../../MINA.html">


                            框架

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.3" data-path="../../../component/">

                        <a href="../../../component/">


                            组件

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.4" data-path="../../../api/">

                        <a href="../../../api/">


                            API

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.5" data-path="../../../devtools/devtools.html">

                        <a href="../../../devtools/devtools.html">


                            工具

                        </a>

                    </li>

                    <li class="sub_nav_item " data-level="1.6" data-path="../../../qa/qa.html">

                        <a href="../../../qa/qa.html">


                            Q&amp;A

                        </a>

                    </li>




                </ul>




                <!-- <h1>事件</h1> -->
                <div id="book-search-input" role="search">
                    <form>
                        <label for="search-input" class="search-icon" id="js-search-icon"></label>
                        <input type="text" id="search-input" name="search-input" placeholder="搜索">
                        <button type="reset" class="clear-input-btn"></button>
                    </form>
                </div>
            </div>
        </div>

        <div class="book-summary">


            <nav role="navigation">





                <ul class="summary">


                    <li class="chapter  " data-level="1.2.1" data-path="../../structure.html">

                        <a href="../../structure.html">


                            目录结构

                        </a>



                    </li>

                    <li class="chapter  " data-level="1.2.2" data-path="../../config.html">

                        <a href="../../config.html">


                            配置

                        </a>



                    </li>

                    <li class="chapter  open" data-level="1.2.3" data-path="../../app-service/">

                        <a href="../../app-service/">


                            逻辑层

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.2.3.1" data-path="../../app-service/app.html">

                                <a href="../../app-service/app.html">


                                    注册程序

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.3.2" data-path="../../app-service/page.html">

                                <a href="../../app-service/page.html">


                                    注册页面

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.3.3" data-path="../../app-service/module.html">

                                <a href="../../app-service/module.html">


                                    模块化

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.3.4" data-path="../../app-service/api.html">

                                <a href="../../app-service/api.html">


                                    API

                                </a>



                            </li>


                        </ul>

                    </li>

                    <li class="chapter  open" data-level="1.2.4" data-path="../">

                        <a href="../">


                            视图层

                        </a>



                        <ul class="articles">


                            <li class="chapter  " data-level="1.2.4.1" data-path="./">

                                <a href="./">


                                    WXML

                                </a>



                                <ul class="articles">


                                    <li class="chapter  " data-level="1.2.4.1.1" data-path="data.html">

                                        <a href="data.html">


                                            数据绑定

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.2" data-path="conditional.html">

                                        <a href="conditional.html">


                                            条件渲染

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.3" data-path="list.html">

                                        <a href="list.html">


                                            列表渲染

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.4" data-path="template.html">

                                        <a href="template.html">


                                            模板

                                        </a>



                                    </li>

                                    <li class="chapter active " data-level="1.2.4.1.5" data-path="event.html">

                                        <a href="event.html">


                                            事件

                                        </a>



                                    </li>

                                    <li class="chapter  " data-level="1.2.4.1.6" data-path="import.html">

                                        <a href="import.html">


                                            引用

                                        </a>



                                    </li>


                                </ul>

                            </li>

                            <li class="chapter  " data-level="1.2.4.2" data-path="../wxss.html">

                                <a href="../wxss.html">


                                    WXSS

                                </a>



                            </li>

                            <li class="chapter  " data-level="1.2.4.3" data-path="../component.html">

                                <a href="../component.html">


                                    组件

                                </a>



                            </li>


                        </ul>

                    </li>


                </ul>


            </nav>


        </div>

        <div class="book-body">

            <div class="body-inner">

                <!--

                <div class="book-header" role="navigation">

                </div>


                 -->

                <div class="page-wrapper" tabindex="-1" role="main">
                    <div class="page-inner">

                        <div id="book-search-results">
                            <div class="search-noresults">

                                <section class="normal markdown-section">

                                    <h1 id="事件">事件</h1><h2 id="什么是事件">什么是事件</h2><ul><li>事件是视图层到逻辑层的通讯方式。
                                </li>
                                    <li>事件可以将用户的行为反馈到逻辑层进行处理。
                                    </li>
                                    <li>事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
                                    </li>
                                    <li>事件对象可以携带额外信息，如id, dataset, touches。
                                    </li></ul>
                                    <h2 id="事件的使用方式">事件的使用方式</h2><ul><li>在组件中绑定一个事件处理函数。
                                </li></ul>
                                    <p>如<code>bindtap</code>，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。</p><pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tapTest"</span> <span class="hljs-attr">data-hi</span>=<span class="hljs-string">"MINA"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"tapName"</span>&gt;</span> Click me! <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></code></pre>
                                    <ul><li>在相应的Page定义中写上相应的事件处理函数，参数是event。
                                    </li></ul>
<pre><code class="lang-js">Page({
  tapName: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
    <span class="hljs-built_in">console</span>.log(event)
  }
})</code></pre>
                                    <ul><li>可以看到log出来的信息大致如下
<pre><code class="lang-json">{
<span class="hljs-string">"type"</span>: <span class="hljs-string">"tap"</span>,
<span class="hljs-string">"timeStamp"</span>: <span class="hljs-number">1252</span>,
<span class="hljs-string">"target"</span>: {
  <span class="hljs-string">"id"</span>: <span class="hljs-string">"tapTest"</span>,
  <span class="hljs-string">"offsetLeft"</span>: <span class="hljs-number">0</span>,
  <span class="hljs-string">"offsetTop"</span>: <span class="hljs-number">0</span>,
  <span class="hljs-string">"dataset"</span>: {
   <span class="hljs-string">"hi"</span>: <span class="hljs-string">"MINA"</span>
  }
},
<span class="hljs-string">"currentTarget"</span>: {
  <span class="hljs-string">"id"</span>: <span class="hljs-string">"tapTest"</span>,
  <span class="hljs-string">"offsetLeft"</span>: <span class="hljs-number">0</span>,
  <span class="hljs-string">"offsetTop"</span>: <span class="hljs-number">0</span>,
  <span class="hljs-string">"dataset"</span>: {
    <span class="hljs-string">"hi"</span>: <span class="hljs-string">"MINA"</span>
  }
},
<span class="hljs-string">"touches"</span>: [{
  <span class="hljs-string">"pageX"</span>: <span class="hljs-number">30</span>,
  <span class="hljs-string">"pageY"</span>: <span class="hljs-number">12</span>,
  <span class="hljs-string">"clientX"</span>: <span class="hljs-number">30</span>,
  <span class="hljs-string">"clientY"</span>: <span class="hljs-number">12</span>,
  <span class="hljs-string">"screenX"</span>: <span class="hljs-number">112</span>,
  <span class="hljs-string">"screenY"</span>: <span class="hljs-number">151</span>
}],
<span class="hljs-string">"detail"</span>: {
  <span class="hljs-string">"x"</span>: <span class="hljs-number">30</span>,
  <span class="hljs-string">"y"</span>: <span class="hljs-number">12</span>
}
}</code></pre>
                                    </li></ul>
                                    <h2 id="事件详解">事件详解</h2><h3 id="事件分类">事件分类</h3><p>事件分为冒泡事件和非冒泡事件</p><ol><li>冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
                                </li>
                                    <li>非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
                                    </li></ol>
                                    <p>WXML的冒泡事件列表：</p><table>
                                    <thead>
                                    <tr><th>类型</th>
                                        <th>触发条件</th>
                                    </tr></thead><tbody>
                                <tr><td>touchstart</td>
                                    <td>手指触摸</td>
                                </tr><tr><td>touchmove</td>
                                    <td>手指触摸后移动</td>
                                </tr><tr><td>touchcancel</td>
                                    <td>手指触摸动作被打断，如来电提醒，弹窗</td>
                                </tr><tr><td>touchend</td>
                                    <td>手指触摸动作结束</td>
                                </tr><tr><td>tap</td>
                                    <td>手指触摸后离开</td>
                                </tr><tr><td>longtap</td>
                                    <td>手指触摸后，超过350ms再离开</td>
                                </tr></tbody></table>

                                    <p><strong>注：除上表之外的其他组件自定义事件都是非冒泡事件，如<a href="../../component/form.html"><code>&lt;form/&gt;</code></a>的<code>submit</code>事件，<a href="../../component/input.html"><code>&lt;input/&gt;</code></a>的<code>input</code>事件，<a href="../../component/scroll-view.html"><code>&lt;scroll-view/&gt;</code></a>的<code>scroll</code>事件，(详见各个<a href="../../component/index.html">组件</a>)</strong></p><h3 id="事件绑定">事件绑定</h3><p>事件绑定的写法同组件的属性，以key、value的形式。</p><ul><li>key以<code>bind</code>或<code>catch</code>开头，然后跟上事件的类型，如<code>bindtap</code>, <code>catchtouchstart</code>
                                </li>
                                    <li>value是一个字符串，需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。
                                    </li></ul>
                                    <p><code>bind</code>事件绑定不会阻止冒泡事件向上冒泡，<code>catch</code>事件绑定可以阻止冒泡事件向上冒泡。</p><p>如在下边这个例子中，点击inner view会先后触发<code>handleTap1</code>和<code>handleTap2</code>(因为tap事件会冒泡到middle view，而middle view阻止了tap事件冒泡，不再向父节点传递)，点击middle view会触发<code>handleTap2</code>，点击outter view会触发<code>handleTap1</code>。</p><pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"outter"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"handleTap1"</span>&gt;</span>
  outer view
  <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"middle"</span> <span class="hljs-attr">catchtap</span>=<span class="hljs-string">"handleTap2"</span>&gt;</span>
    middle view
    <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"inner"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"handleTap3"</span>&gt;</span>
      inner view
    <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></code></pre>
                                    <h3 id="事件对象">事件对象</h3><p>如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。</p><p><strong>事件对象的属性列表：</strong></p><table>
                                    <thead>
                                    <tr><th>属性</th>
                                        <th>类型</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td><a href="#type">type</a></td>
                                    <td>String</td>
                                    <td>事件类型</td>
                                </tr><tr><td><a href="#timeStamp">timeStamp</a></td>
                                    <td>Integer</td>
                                    <td>事件生成时的时间戳</td>
                                </tr><tr><td><a href="#target">target</a></td>
                                    <td>Object</td>
                                    <td>触发事件的组件的一些属性值集合</td>
                                </tr><tr><td><a href="#currenttarget">currentTarget</a></td>
                                    <td>Object</td>
                                    <td>当前组件的一些属性值集合</td>
                                </tr><tr><td><a href="#touches">touches</a></td>
                                    <td>Array</td>
                                    <td>触摸事件，触摸点信息的数组</td>
                                </tr><tr><td><a href="#detail">detail</a></td>
                                    <td>Object</td>
                                    <td>额外的信息</td>
                                </tr></tbody></table>

                                    <h3 id="type">type</h3><h4 id="通用事件类型">通用事件类型</h4><h3 id="timestamp">timeStamp</h3><p>该页面打开到触发事件所经过的毫秒数。</p><h3 id="target">target</h3><p>触发事件的源组件。</p><table>
                                    <thead>
                                    <tr><th>属性</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>id</td>
                                    <td>事件源组件的id</td>
                                </tr><tr><td><a href="#dataset">dataset</a></td>
                                    <td>事件源组件上由<code>data-</code>开头的自定义属性组成的集合</td>
                                </tr><tr><td>offsetLeft, offsetTop</td>
                                    <td>事件源组件的坐标系统中偏移量</td>
                                </tr></tbody></table>

                                    <h3 id="currenttarget">currentTarget</h3><p>事件绑定的当前组件。</p><table>
                                    <thead>
                                    <tr><th>属性</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>id</td>
                                    <td>当前组件的id</td>
                                </tr><tr><td><a href="#dataset">dataset</a></td>
                                    <td>当前组件上由<code>data-</code>开头的自定义属性组成的集合</td>
                                </tr><tr><td>offsetLeft, offsetTop</td>
                                    <td>当前组件的坐标系统中偏移量</td>
                                </tr></tbody></table>

                                    <p><strong>说明: target和currentTarget可以参考上例中，点击inner view时，<code>handleTap3</code>收到的事件对象target和currentTarget都是inner，而<code>handleTap2</code>收到的事件对象target就是inner，currentTarget就是middle</strong></p><h5 id="dataset">dataset</h5><p>在组件中可以定义数据，这些数据将会通过事件传递给SERVICE。
                                    书写方式：
                                    以<code>data-</code>开头，多个单词由连字符<code>-</code>链接，不能有大写(大写会自动转成小写)如<code>data-element-type</code>，最终在event.target.dataset中会将连字符转成驼峰<code>elementType</code>。</p><p><strong>示例：</strong></p><pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">data-alpha-beta</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">data-alphaBeta</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"bindViewTap"</span>&gt;</span> DataSet Test <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span></code></pre>
<pre><code class="lang-javascript">Page({
  bindViewTap:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>)</span>{
    event.target.dataset.alphaBeta == <span class="hljs-number">1</span> <span class="hljs-comment">// - 会转为驼峰写法</span>
    event.target.dataset.alphabeta == <span class="hljs-number">2</span> <span class="hljs-comment">// 大写会转为小写</span>
  }
})</code></pre>
                                    <h3 id="touches">touches</h3><p>touches是一个触摸点的数组，每个触摸点包括以下属性：</p><table>
                                    <thead>
                                    <tr><th>属性</th>
                                        <th>说明</th>
                                    </tr></thead><tbody>
                                <tr><td>pageX,pageY</td>
                                    <td>距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴</td>
                                </tr><tr><td>clientX,clientY</td>
                                    <td>距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴</td>
                                </tr><tr><td>screenX,screenY</td>
                                    <td>距离屏幕左上角的距离，屏幕左上角为原点，横向为X轴，纵向为Y轴</td>
                                </tr></tbody></table>

                                    <h3 id="detail">detail</h3><p>特殊事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见<a href="wxml/wxml-component.md">组件</a>定义中各个事件的定义。</p>

                                </section>

                            </div>
                            <div class="search-results">
                                <div class="has-results">

                                    <h1 class="search-results-title"><span class="search-results-count"></span> 个结果 "<span class="search-query"></span>"</h1>
                                    <ul class="search-results-list"></ul>

                                </div>
                                <div class="no-results">

                                    <h1 class="search-results-title">没有找到相关内容 "<span class="search-query"></span>"</h1>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="foot" id="footer">
                    <ul class="links ft">
                        <li class="links_item"><a href="">关于腾讯</a></li>
                        <li class="links_item"><a href="">服务协议</a></li>
                        <li class="links_item"><a href="">运营规范</a></li>
                        <li class="links_item"><a href="">辟谣中心</a></li>
                        <li class="links_item"><a href="">客服中心</a></li>
                        <li class="links_item"><a href="">联系邮箱</a></li>
                        <li class="links_item"><a href="">侵权投诉</a></li>
                        <li class="links_item">
                            <p class="copyright">Copyright © 2012-<span id="s_copyright_year"></span> Tencent. All Rights Reserved.</p>
                        </li>
                    </ul>
                </div>

            </div>



            <a href="template.html" class="navigation navigation-prev " aria-label="Previous page: 模板">
                <i class="fa fa-angle-left"></i>
            </a>


            <a href="import.html" class="navigation navigation-next " aria-label="Next page: 引用">
                <i class="fa fa-angle-right"></i>
            </a>



        </div>
    </div>


    <script src="../../../../gitbook/gitbook.js"></script>
    <script src="../../../../gitbook/theme.js"></script>


    <script src="../../../../gitbook/gitbook-plugin-search/search-engine.js"></script>



    <script src="../../../../gitbook/gitbook-plugin-search/search.js"></script>



    <script src="../../../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>



    <script src="../../../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>


    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"事件","level":"1.2.4.1.5","depth":4,"next":{"title":"引用","level":"1.2.4.1.6","depth":4,"path":"framework/view/wxml/import.md","ref":"framework/view/wxml/import.md","articles":[]},"previous":{"title":"模板","level":"1.2.4.1.4","depth":4,"path":"framework/view/wxml/template.md","ref":"framework/view/wxml/template.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"ignoreSpecialCharacters":false,"maxIndexSize":1000000},"theme-default":{"showLevel":false,"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"}}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"ebook":"styles/ebook.css","epub":"styles/epub.css","mobi":"styles/mobi.css","pdf":"styles/pdf.css","print":"styles/print.css","website":"styles/website.css"}},"file":{"path":"framework/view/wxml/event.md","mtime":"2016-09-21T05:53:11.000Z","type":"markdown"},"gitbook":{"version":"3.2.0","time":"2016-09-22T09:40:22.799Z"},"basePath":"../../..","book":{"language":""}});
        });
    </script>




</div></body></html>